<template>
  <div>
    <div class="video" id="videoReplay">
      <div id="Replaydragbar" class="Replaydragbar" v-show="dragbarShow"></div>
      <!--<div class="headerBar" v-show="dragbarShow"></div>-->
      <div class="closeimg" @click="closeVideoReplay" v-show="dragbarShow"><i class="iconfont icon-qiapianshangdeguanbi" style="color: #737373;"></i></div>
      <!--<div class="maximg" @click="maxVideoReplay" v-show="dragbarShow && !videoMax"><i class="iconfont icon-zuidahua" style="color: #666;"></i></div>-->
      <!--<div class="maximg" @click="smallVideoReplay" v-show="dragbarShow && videoMax"><i class="iconfont icon-zuixiaohua" style="color: #666;"></i></div>-->
      <p class="videoInfo font16" v-if="chatMsg.contentType === 'video'" v-show="dragbarShow">{{$t('public.videoEndTime')}}：{{chatMsg.dateTime}}</p>
      <p class="videoInfo font16" v-if="chatMsg.contentType === 'screenShare'" v-show="dragbarShow">{{$t('screenShare.shareEndTime')}}：{{chatMsg.dateTime}}</p>

        <video id="replayVideo" width="100%" height="auto" class="video_replay" :class="{maxvideo: videoMax}" autoplay>
        <source :src="replayUrl" />
      </video>
      <div class="controlBar">
        <div class="playControl">
          <span @click="fastOrBack('back')" class="backControl"><i class="iconfont icon-shipinliaotianhoutui"></i></span>
          <span @click="playOrpause" class="pauseControl"><i class="iconfont" :class="[isPlaying === true ? 'icon-zanting' : 'icon-huifu']"></i></span>
          <span @click="fastOrBack('fast')" class="forwardControl"><i class="iconfont icon-shipinliaotianqianjin"></i></span>
        </div>
        <div class="processControl">
          <span>{{currentTimeFormat}}</span>
          <div id="processBar" class="processBar">
            <div id="innerBar" class="innerBar"></div>
            <div id="currentTimePoint" class="currentTimePoint"></div>
          </div>
          <span style="margin-left: 6px">{{durationFormat}}</span>
        </div>
        <div class="download" v-show="chatMsg.contentType === 'wechatvideo'">
          <a :href="replayUrl" :download="replayUrl" target="_blank" class="download_btn"><span class="iconfont icon-xiazai"></span></a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  let tWidth, tHeight
  window.onresize = function () {
    tWidth = document.body.clientWidth
    tHeight = document.body.clientHeight
  }
  export default({
    name: 'PopDragVideoReplay',
    data () {
      return {
        dragbarShow: true,
        params: {
          left: 0,
          top: 0,
          currentX: 0,
          currentY: 0,
          flag: false
        },
        dragWidth: 0,
        dragHeight: 0,
        isPlaying: true,
        durationFormat: '',
        currentTimeFormat: '',
        videoMax: false
      }
    },
    props: ['replayUrl', 'chatMsg'],
    methods: {
      maxVideoReplay () {
        this.videoMax = true
        let Video = document.getElementById('videoReplay')
        Video.style.left = '0'
        Video.style.top = '0'
        Video.style.width = window.innerWidth + 'px'
        Video.style.height = window.innerHeight + 'px'
      },
      smallVideoReplay () {
        this.videoMax = false
        let Video = document.getElementById('videoReplay')
        Video.style.left = '28%'
        Video.style.top = '0'
        Video.style.width = '640px'
        Video.style.height = 'auto'
      },
      processBarClick (e) {
        let video = document.getElementById('replayVideo')
        let barWidth = document.getElementById('processBar').clientWidth
        let x = e.offsetX
        if (video.duration) {
          video.currentTime = (video.duration * x / barWidth).toFixed(0)
        }
      },
      onTimeupdate () {
        if (!document.getElementById('replayVideo')) {
          return
        }
        let video = document.getElementById('replayVideo')
        let innerBar = document.getElementById('innerBar')
        let currentTimePoint = document.getElementById('currentTimePoint')
        let per
        let barWidth = document.getElementById('processBar').clientWidth
        if (video.duration) {
          per = (video.currentTime / video.duration).toFixed(3)
        }
        innerBar.style.width = barWidth * per + 'px'
        currentTimePoint.style.left = barWidth * per - 4 + 'px'
        this.currentTimeFormat = this.videoTimeFormat(video.currentTime)
        this.durationFormat = this.videoTimeFormat(video.duration)
        if (video.ended) {
          this.isPlaying = false
        }
      },
      fastOrBack (type) {
        let video = document.getElementById('replayVideo')
        let duration = video.duration
        if (type === 'fast') {
          video.currentTime += 10
          if (video.currentTime > duration) {
            video.currentTime = duration
          }
        } else if (type === 'back') {
          video.currentTime += -10
          if (video.currentTime < 0) {
            video.currentTime = 0
          }
        }
      },
      playOrpause () {
        let video = document.getElementById('replayVideo')
        if (video.paused) {
          video.play()
          this.isPlaying = true
        } else {
          video.pause()
          this.isPlaying = false
        }
      },
      closeVideoReplay () {
        this.$emit('closeVideoReplay')
      },
      videoTimeFormat (time) {
        let timefix = time.toFixed(1)
        let hours = Math.floor(timefix / 3600)
        let minutes = Math.floor((timefix / 60) % 60)
        let seconds = Math.floor(timefix % 60)
        hours = hours < 10 ? '0' + hours : hours
        minutes = minutes < 10 ? '0' + minutes : minutes
        seconds = seconds < 10 ? '0' + seconds : seconds
        return hours + ':' + minutes + ':' + seconds
      },
      getCss (o, key) {
        return o[key]
      },
      startDrag (bar, target, self, callback) {
        bar.onmousedown = function (event) {
          event.preventDefault()
          if (self.getCss(target, 'offsetLeft') !== 'auto') {
            self.params.left = self.getCss(target, 'offsetLeft')
          }
          if (self.getCss(target, 'offsetTop') !== 'auto') {
            self.params.top = self.getCss(target, 'offsetTop')
          }
          self.params.flag = true
          if (!event) {
            event = window.event
            bar.onselectstart = function () {
              return false
            }
          }
          let e = event
          self.params.currentX = e.clientX
          self.params.currentY = e.clientY < 0 ? 0 : e.clientY
        }
        target.onmouseup = function () {
          self.params.flag = false
          if (self.getCss(target, 'offsetLeft') !== 'auto') {
            self.params.left = self.getCss(target, 'offsetLeft')
          }
          if (self.getCss(target, 'offsetTop') !== 'auto') {
            self.params.top = self.getCss(target, 'offsetTop')
          }
        }
        target.onmousemove = function (event) {
          let e = window.event
          let nowX = e.clientX
          let nowY = e.clientY
          let disX = 0
          let disY = 0
          if (self.params.flag) {
            disX = nowX - self.params.currentX
            disY = nowY - self.params.currentY
            // 判断上下左右的极限位置
            let limitLeft = (parseInt(self.params.left) + disX) > (tWidth - 50) ? (tWidth - 50) : (parseInt(self.params.left) + disX) < (100 - self.dragWidth) ? 100 - self.dragWidth : parseInt(self.params.left) + disX
            let limitTop = (parseInt(self.params.top) + disY) > (tHeight - 34) ? (tHeight - 34) : (parseInt(self.params.top) + disY) < 0 ? 0 : parseInt(self.params.top) + disY
            target.style.left = limitLeft + 'px'
            target.style.top = limitTop + 'px'
          }
          if (typeof callback === 'function') {
            callback(parseInt(self.params.left) + disX, parseInt(self.params.top) + disY)
          }
        }
      },
      dragBarOver (self) {
        let oContent = document.getElementById('videoReplay')
        oContent.onmouseover = function () {
          self.dragbarShow = true
        }
        oContent.onmouseout = function () {
          self.dragbarShow = false
        }
      }
    },
    mounted () {
      let oContent = document.getElementById('videoReplay')
      let videoReplay = document.getElementById('replayVideo')
      let processBar = document.getElementById('processBar')
      let oBar = document.getElementById('Replaydragbar')
      this.dragBarOver(this)
      this.startDrag(oBar, oContent, this)
      this.dragWidth = oContent.clientWidth
      this.dragHeight = oContent.clientHeight
      tWidth = document.body.clientWidth
      tHeight = document.body.clientHeight
      videoReplay.addEventListener('timeupdate', this.onTimeupdate)
      processBar.addEventListener('click', this.processBarClick)
    },
    beforeDestroy () {
//      let videoReplay = document.getElementById('replayVideo')
//      videoReplay.removeEventListener('timeupdate', this.onTimeupdate)
    }
  })
</script>
<style lang='stylus' scoped type="text/stylus">
  @import "../../../assets/common.styl"
  .video
    position: absolute;
    left: 28%;
    top: 5%;
    width: 640px;
    z-index: 30000;
    overflow: hidden;
    background: $cf-white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 0 0 3px 2px rgba(53, 53, 53, 0.1);
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-style: solid solid none;
    border-top-color: $c-main;
    border-right-color: $c-main;
    border-left-color: $c-main;
    .headerBar
      position: absolute
      top: 0
      background-color: rgba(0, 0, 0, .4)
      width 100%
      height 60px
    .videoInfo
      position: absolute
      color $cf-white
      top 21px
      left 5%
    .controlBar
      width: 100%;
      height: 50px;
      line-height 50px
      background-color: $cf-gray0;
      z-index 1
      margin-top -2px
      .playControl
        float left
        display inline-block
        width 18%
        text-align center
        span
          width 35px
          height 35px
          line-height 35px
          border-radius 50%
          border 1px solid $c-main
          font-size 20px
          cursor pointer
          color $c-main
          background $cf-gray0
          display inline-block
          text-align center
        .pauseControl
          position relative
        .backControl, .forwardControl
          width 30px
          height 30px
          line-height 30px
        .backControl
          margin-right -7px
        .forwardControl
          margin-left -7px
      .processControl
        display inline-block
        width 72%
        color $cf-white
        font-size 14px
        span
          display inline-block
        .processBar
          display inline-block
          position relative
          vertical-align super
          width 70%
          top 1px
          height 4px
          background  #696969
          border-radius 2px
          cursor pointer
          margin 0 10px
          .innerBar
            width 0
            border-radius 2px
            height 4px
            filter blur(1px)
            background  $c-main
          .currentTimePoint
            width 10px
            height 10px
            top -4px
            background $c-main
            border-radius 50%
            border solid 1px $cf-white
            position absolute
            left 0
      .download
        float right
        margin-right 30px
        display inline-block
        width 5%
        color $cf-white
        font-size 14px
        text-align center
        .download_btn
          cursor pointer
          display inline-block
          border 1px solid $c-main
          border-radius 50%
          width 30px
          height 30px
          line-height 100%
          padding-top 4px
          box-sizing border-box
    .Replaydragbar
      width: 100%;
      height: 80%;
      opacity: 0;
      position: absolute;
      background-color: $cf-white;
      cursor: move;
      z-index 1
    .closeimg
      position: absolute;
      right: 18px;
      top: 2%;
      width: 30px;
      height: 30px;
      line-height 30px
      background-color: white;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      z-index 2
      img
        width: 25px;
        vertical-align: middle;
    .minimg:after
      content: '';
      display: inline-block;
      width: 0;
      height: 100%;
      vertical-align: middle;
    .maximg
      position: absolute;
      right: 55px;
      top: 2%;
      width: 30px;
      height: 30px;
      line-height 30px
      background-color: white;
      border-radius: 50%;
      text-align: center;
      cursor: pointer;
      z-index 2
      img
        width: 25px;
        vertical-align: middle;
  .videosmall
    width 120px
    height 90px
  .video_replay
    max-height calc(100vh - 100px)
  .maxvideo
    height calc(100vh - 52px)
    max-height 100%
</style>
